<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin:0px;
        padding:0px;


    }
   
    body{
        background: #eee;
        padding-top: 20px;      
    }
       .d1{ background: url(朋友圈.png)   no-repeat  10px  center,url(右箭头.png)   no-repeat  right  center;
        background-color: white;
        background-size:10%;
        margin-bottom: 10px;
        
        
       
        }
        .d2{
              background: url(扫一扫.png)   no-repeat  10px  center,url(右箭头.png)   no-repeat  right  center;
        background-size:10%;
        background-color: white;
        background-size:10%;
        
         }
         .d3{
             background: url(摇一摇.png)   no-repeat   10px  center,url(右箭头.png)   no-repeat    right   center ;
           background-size:10%;
           background-color: white;
        border-top:1px  solid #ccc;
        margin-bottom: 10px;
         }
         
        .d4{
           
            background: url(看一看.png)      no-repeat    10px center,url(右箭头.png)    no-repeat    right  center;
            background-size:10%;
            background-color: white;

}
.d5{
    background: url(搜一搜.png)  no-repeat   10px center,url(右箭头.png)   no-repeat  right   center;
    background-size:10%;
            background-color: white;
            border-top:1px  solid  #ccc;
            margin-bottom: 10px;
}
.d6{
    background: url(附近的人.png)   no-repeat   10px center,url(右箭头.png)   no-repeat   right center;
    background-color: white;
    background-size: 10%;
    margin-bottom: 10px;
}
.d7{
    background: url(购物.png)    no-repeat   10px center,url(右箭头.png)   no-repeat   right  center;
    background-size: 10%;
    background-color: white;


}
.d8{
    background: url(游戏.png)  no-repeat  10px center,url(右箭头.png)    no-repeat right    center  ;
    background-size: 10%;
background-color: white;
border-top:1px solid #ccc;
margin-bottom: 10px;


}
.d9{
    background: url(小程序.png)  no-repeat  10px center,url(右箭头.png)   no-repeat right    center  ;
    background-size: 10%;
background-color: white;
margin-bottom: 50px;


}

    li{
            width:300px;
            height:45px;
            line-height: 45px;
            background-color: white;
            text-indent: 5em;
            list-style: none;
    }

    tr{
    background-color: white;
    }
    td{
        text-align: center;
    }
    
    img{
        width:30px;
        height:30px;
        
    }
    table{
        height:45px;
        width:100%;

    }
    
        
    


</style>

<body>
<div>
    <ul>
        <li  class="d1">朋友圈</li>
</ul>
<ul  >
    <li  class="d2">扫一扫</li>
    <li   class="d3">摇一摇</li>
</ul>
<ul  >
    <li  class="d4">看一看</li>
    <li   class="d5">搜一搜</li>
</ul>
<ul>
    <li class="d6">附近的人</li>
</ul>
<ul>
    <li    class="d7">购物</li>
    <li  class="d8">游戏</li>
</ul>
<ul>
    <li   class="d9">小程序</li>
</ul>
<table>
    <tr>
        <td   ><img   src="  C:\Users\Administrator\Desktop\作业7\微信.png  " /></td>
        <td><img src=" C:\Users\Administrator\Desktop\作业7\搜一搜.png   " /></td>
        <td><img  src=" C:\Users\Administrator\Desktop\作业7\发现.png " /></td>
        <td><img  src=" C:\Users\Administrator\Desktop\作业7\我的.png   " /></td>
    </tr>
</table>
</div>
     
     






    
</body>
</html>